<script setup>
import axios from 'axios';
import { onMounted, nextTick, ref, reactive, watch, inject, Transition } from 'vue'
import Inject from './Inject.vue';
onMounted(() => {
  const a1 = axios({
    method: "post",
    url: url + "/getData",
    data: {
      ccc: 300
    }
  })
  const a2 = axios({
    method: "post",
    url: url + "/getData",
    data: {
      ccc: 300
    }
  })
  Promise.all([a1, a2]).then(res => {
    console.log(res);
  })

  
    // 获得add闭包函数inner()   //"123"

  // let str="sds你好"
  // let arr=[]
  // for(let i=0;i<str.length;i++){
  //   arr.push(str[i])
  // }
  // console.log(String(arr));

  // getData()
  // dealData()

})

// const getData = () => {
//   axios({
//     method: "post",
//     url: url + "/getData",
//     data:{
//       ccc:300
//     }
//   }).then(res => {
//     console.log(res.data);
//   })
// }

// const dealData = () => {
//   axios({
//     method: "post",
//     url: url + "/dealData",
//     data:{
//       index:300
//     }
//   }).then(res => {
//     console.log(res.data);
//   })
// }
// const url = '/api'
// const cClick = () => {
//   console.log("c");
// }
// const pClick = () => {
//   console.log("p");
// }

// let arr = [5, 6]
// console.log(arr.map(item => {
//   return item * 2
// }));
// console.log(arr.filter(item => {
//   if (item < 6) {
//     // 留下
//     return true
//   }
// }));
// console.log(['1', '2', '3'].map(parseInt));
// // if 判断的时候一般都是转换成number，null==undefined是true且他俩和谁比都是false，""==0是true
// console.log("1" == true);

// for (var i = 0; i < 10; i++) {
//   let a = i
//   setTimeout(() => {
//     console.log(a);
//   }, 0)
// }

// const test = (): Number => {
//   return 5
// }

// const msg = ref(inject("msg"))

const values = ref([
  {
    src: "https://iconfont.alicdn.com/p/illus_3d/preview_image/6ysIeM30bNwA/4b47568f-0617-40a5-8d21-a081b239118e.png"
  },
  {
    src: "https://iconfont.alicdn.com/p/illus_3d/preview_image/6ysIeM30bNwA/b5a887c6-5e78-4d01-91b4-79575121491f.png"
  },
  {
    src: "https://iconfont.alicdn.com/p/illus_3d/preview_image/6ysIeM30bNwA/ec7e1b53-2355-4d7c-9477-157115e10d31.png"
  },
  {
    src: "https://iconfont.alicdn.com/p/illus_3d/preview_image/6ysIeM30bNwA/d5f4de92-173d-4b4e-b9c0-ea3b7ab77996.png"
  },
  {
    src: "https://iconfont.alicdn.com/p/illus_3d/preview_image/6ysIeM30bNwA/ea9a63fd-32d1-4d75-b53d-96ae0beb2a4e.png"
  },
  {
    src: "https://iconfont.alicdn.com/p/illus_3d/preview_image/6ysIeM30bNwA/fa4ef0cd-b14a-4735-aadd-ec23706a869b.png"
  },
])

const sty = reactive({
  boxShadow: "0px 0px 15px #888888",
  // width: "80px"

})
const sty1 = reactive({
  // width: "0px",
  // opacity: 0,
  // transform: "translateX(-80px)"
})
const sty2 = reactive({
  boxShadow: "0px 0px 15px #888888",
  // border:"2px solid #888888",
  borderRadius: "50px"
})
const sty3 = reactive({
  boxShadow: "0px 0px 15px transparent",
  // border:"2px solid transparent",
  borderRadius: "50px"
})
const hoverId = ref(null),
  isFold = ref(false)

const itemClick = (idx) => {
  if (idx != 0) return
  isFold.value = !isFold.value

  // sty1.display = "none"
},
  itemEnter = (idx) => {
    hoverId.value = idx
  },
  itemLeave = () => {
    hoverId.value = null
  },
  dealSty = (idx) => {
    if (isFold.value) {
      if (idx != 0) {
        // return sty1
        return sty
      } else {
        return reactive({
          transform: "rotateZ(360deg)",
        })
      }
    }
    else {
      if (idx != hoverId.value) {
        return sty
      } else {
        return reactive({
          boxShadow: "",
          // transform: "rotateZ(360deg)",
          // width: "200px",
        })
      }
    }
  }
</script>

<template>
  <div id="layout">
    <div id="contain1" style="height: 100%;width: 250px;margin-left: 50px;">
      <div class="item" v-for="(item, idx) in values" @click="itemClick(idx)" @mouseenter="itemEnter(idx)"
        @mouseleave="itemLeave" :style="hoverId == idx && idx != 0 ? sty2 : sty3">
        <Transition name="img">
          <img :src=item.src :style="dealSty(idx)" v-if="!isFold || idx == 0">
        </Transition>
        <Transition>
          <div v-if="idx != 0 && idx == hoverId" style="display: flex;align-items: center;">
            <el-button size="default" @click="">查看</el-button>
            <el-button size="default" @click="">操作</el-button>
          </div>
        </Transition>
      </div>
    </div>
    <!-- {{ msg }}
    <el-input v-model="msg" placeholder="" size="normal" clearable @change=""></el-input>
    <Inject /> -->
    <!-- <div style="background-color: antiquewhite;width: 200px;height: 200px;" @click="pClick">
      <div style="background-color: aqua;width: 100px;height: 100px;" @click="cClick"></div>
    </div> -->
  </div>
</template> 

<style lang='less' scoped>
/* 下面我们会解释这些 class 是做什么的 */


.item {
  margin: 5px;
  caret-color: transparent;
  cursor: pointer;
  display: flex;

  .img-enter-active,
  .img-leave-active {
    // transition: all 0.3s ease;
  }

  .img-enter-from,
  .img-leave-to {
    opacity: 0;
    transform: translateX(-100px);
  }

  .v-enter-active {
    transition: opacity 0.3s ease;
  }

  .v-enter-from,
  .v-leave-to {
    opacity: 0;
  }

  img {
    height: 80px;
    width: 80px;
    border-radius: 50px;
    transition: all 0.3s;
  }
}
</style>